<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>早餐-小俊美食</title>
	<link rel="icon" href="img/logo/logo.jpg" sizes="32*32">
	<link rel="stylesheet" type="text/css" href="css/title.css">
	<style type="text/css">
		.middle_top{
			display: flex;
			justify-content: space-between;
		}
		
		.middle_top .middle_top_left{
			position: relative;
		}
		
		.middle_top .middle_top_left .search{
			position: absolute;
			top: 7px;
			margin-left: 8px;
		}
		
		.middle_top .middle_top_left a img{
			width: 20px;
		}
		.middle_top .middle_top_left input{
			box-sizing: border-box;
			height: 34px;
			width: 220px;
			border: 0;
			border-radius: 10px;
			padding: 7px 10px 7px 38px;
			color: rgba(0,0,0,.3);
		}
		
		.middle_top .middle_top_left a button{
			box-sizing: border-box;
			border: 0;
			background-color: #fff;
			width: 88px;
			height: 34px;
			border-radius: 10px;
			margin-left: 13px;
		}
		.middle_top .middle_top_right{
			background-color: rgba(0,0,0,.26);
			font-size: 12px;
			width: 44px;
			height: 33px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 3px;
		}
		.middle_top .middle_top_right a{
			color: #fff;
		}
		.middle_card ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		
		.middle_card ul li{
			width: 263px;
			margin-top: 16px;
			box-sizing: border-box;
		}
		
		.middle_card ul li a{
			display: block;
			height: 160px;
			overflow: hidden;
		}
		
		.middle_card ul li a img{
			display: block;
			width: 100%;
			border-radius: 10px 10px 0 0;
		}
		
		.middle_card ul li .text_top span{
			font-size: 12px;
			white-space: nowrap;
			color: #797c80;
			margin: -6px 0 13px;
		}
		
		.middle_card ul li .text_top div {
			color: #607d8b;
			font-size: 12px;
			margin: 10px 0;
		}
		
		.middle_card ul li .text_top{
			box-sizing: border-box;
			padding: 0 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: #fff;
		}
		
		.middle_card ul li .date{
			padding: 12px 16px;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 0 0 10px 10px;
		}
		.middle_card ul li .date span{
			display: block;
			
			font-size: 12px;
			color: #797c80;
		}
		.middle_card ul li .date img{
			width: 12px;
			padding: 0 4px 0 15px;
			
		}
		.middle_card ul li .date div{
			font-size: 12px;
			color: #aaaeb3;
			display: flex;
			align-items: center;
		}
		
		hr{
			margin: 0;
			border-top: 0;
		}
		h4{
			margin: 11px 0;
		}
		
		.low>ul{
			height: 58px;
			background-color: #fff;
			display: flex;
			margin: 25px 0 14px;
			border-radius: 12px;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
		}
		.low>ul>li{
			user-select: none;
			width: 40px;
			height: 40px;
			border-radius: 10px;
			background-color: #f6f7f8;
			margin-right: 5px;
			line-height: 40px;
			text-align: center;
			font-size: 12px;
			color: #469c51;
			font-weight: bold;
		}
		.low>ul>li.action{
			color: #ccc;
		}
	</style>
</head>
<body>
	<div id="title" class="title">
		<div id="title_top" class="title_top">
			<div id="title_top_left" class="title_top_left">
				<a href="#">
					<h2>小俊食谱中心</h2>
				</a>
				<a href="#" class="title_a">食谱专题</a>
				<a href="#" class="title_a">口味分类</a>
				<a href="#" class="title_a">加入美食群</a>
			</div>
			<div id="title_top_right" class="title_top-right">
				<div id="Select_Search">
					<select id="head_select">
						<option value="wenZhang">文章</option>
						<option value="yongHu">用户</option>
						<option value="wenDang">文档</option>
					</select>
					<input type="search" placeholder="搜索" class="search">
					<a href="#"><img src="./img/spirit/search.png" alt=""></a>
				</div>
				<button class="reg"><a href="MS_product/public/login.html">登录/注册</a></button>
			</div>
		</div>
		<hr>
		<div id="title_low" class="title_low">
			<div id="title_low_left" class="title_low_left">
				<a href="index.html" id="head_list_1">全部</a>
				<a href="#" id="head_list_2" style="color: #469c51;">早餐</a>
				<a href="#" id="head_list_3">烘焙甜品</a>
				<a href="#" id="head_list_4">鸡鸭禽类</a>
				<a href="#" id="head_list_5">猪牛羊肉</a>
				<a href="#" id="head_list_6">海鲜水产</a>
				<a href="#" id="head_list_7">蔬食</a>
				<a href="#" id="head_list_8">小炒</a>
				<a href="#" id="head_list_9">主食</a>
				<a href="#" id="head_list_10">例汤</a>
				<a href="#" id="head_list_11">中式面点</a>
				<a href="#" id="head_list_12">西餐</a>
				<a href="#" id="head_list_13">果汁饮品</a>
				<a href="#" id="head_list_14">卤味酱料</a>
			</div>
			<div id="title_low_right" class="title_low_right">
				<a href="add.html">
					<div>
						<img src="./img/spirit/Pens.png">
						<span>写菜谱</span>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="sever" id="sever">
		<div class="center">
			<div class="middle_top">
				<div class="middle_top_left">
					<a href="#" class="search"><img src="img/spirit/search.png" alt=""></a>
					<input type="text" placeholder='在「早餐」中搜索'>
					<a href="#" class="all"><button>全部标签</button></a>
				</div>
				<div class="middle_top_right"><a href="#">早餐</a></div>
			</div>
			<div class="middle_card">
				<ul>
					<li>
						<a href="#"><img src="img/today/today_3.jpg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_1.jpeg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_2.jpg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_4.jpg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_5.jpg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_6.jpeg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li>
						<a href="#"><img src="img/today/today_7.jpg"></a>
						<div class="text_top">
							<h4>清暑绿豆粥</h4>
							<span>食材包子面团：按馒头食谱制作 糖粉20克包子馅：肉馅 500克葱花 50克生抽 40克冰糖粉 1克蚝油 10克老抽 一点上色水 60克</span>
							<div>中式面点</div>
						</div>
						<hr>
						<div class="date">
							<span>2020年8月20日</span>
							<div>
								<img src="img/spirit/look.png">89
								<img src="img/spirit/like.png">40
							</div>
						</div>
					</li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			
			<div class="low">
				<ul>
<!-- 					<li class="action">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<span>...</span>
					<li>11</li> -->
				</ul>
			</div>
			<div>&nbsp;</div>
		</div>
	</div>
	
	
	
	<div class="tail">
		<div class="last">
			<p>微信号:a15803260331</p>
			<p>个人内部学习使用项目，如有参考需求，可添加微信</p>
			<p>备案号 © 预留位置</p>
		</div>
		<img src="img/WeChat/WeChat.jpg">
	</div>
	
	<script src="js/jquery-3.6.0.min.js"></script>
	<script>
		
		
		window.onload = function(){	
			let ftypeid = 1
			let pageSize = 0
			let xhr_1 = new XMLHttpRequest()
			xhr_1.open('GET','/v2/f/page?ftypeid='+ ftypeid) 
			xhr_1.onload = function(){
				let data = JSON.parse(xhr_1.responseText)
				console.log(data[0].num)
				if(data[0].num % 8 == 0)
					pageSize = data[0].num / 8
				else pageSize = (data[0].num - (data[0].num % 8)) / 8 + 1
				
				let pag = [{p: pageSize}] 
				$('#sever>.center>.low>ul').empty().append(
					pag.map( l => {
						const { p } = l
						var page = ''
						if( p <= 5 ){
							for(var i=1; i<=p; i++)
								if( i == 1 )
									page += '<li class="action">1</li>'
								else page += `<li>${i}</li>`
							return page
						}
						else return `
							<li class="action">1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<span>...</span>
							<li>${p}</li>
						`
					})
					
				)
			}
			xhr_1.send()
			
			let xhr_3 = new XMLHttpRequest()
			xhr_3.open('GET',`/v2/f/title_type?ftypeid=${ftypeid}&page=${1}`) 
			xhr_3.onload = function(){
				let data = JSON.parse(xhr_3.responseText)
				$('#sever>.center>.middle_card>ul').empty().append(
					data.map( f => {
						const { fpic, fname, fprop, fdate } = f
						return `
						<li>
							<a href="#"><img src=${fpic}></a>
							<div class="text_top">
								<h4>${fname}</h4>
								<span>${fprop}</span>
								<div>早餐</div>
							</div>
							<hr>
							<div class="date">
								<span>${fdate.slice(0,10)}</span>
								<div>
									<img src="img/spirit/look.png">89
									<img src="img/spirit/like.png">40
								</div>
							</div>
						</li>`
					})
				)
			}
			xhr_3.send()
			
			$('.low>ul').on('click', '>li', function(){
				$('.low>ul').html('')
				let pageList = ''
				const index = $(this).html()
				console.log(index);
				
				if( index != 1 && index >= 4 && pageSize != 4)
					pageList += `<li class='li_1'>1</li>`
				
				if( index - 2 >= 2 && index <= pageSize && pageSize > 5)
					pageList += '<span>...</span>'
					
				/* 当前页码的前两页 */
				var start = index - 2; //  4  2
				/* 当前页码的后两页 */
				var end = index - -2;   //  4  6
				
				if ((start > 1 && index < 4) || index == 1) {
				    end++;
				}
				if (index > pageSize - 4 && index >= pageSize) {
				    start--;
				}		

				if ( index < 4 && pageSize > 4 ){
					for(var i = 1 ; i <= 4 ; i++)
					pageList += `<li class='li_${i}'>${i}</li>`;
				}
				else if (index >= pageSize - 2  && pageSize >= 6 ){
					for(var i = -3 ; i <= 0 ; i++)
					pageList += `<li class='li_${pageSize + i}'>${pageSize + i}</li>`;
				}
				else{
					for (; start <= end; start++) {
						if (start <= pageSize && start >= 1) {
							pageList += `<li class='li_${start}'>${start}</li>`;
						}
					}
				}

				if (index < 4 && pageSize >=6 ){
					pageList += '<span>...</span>';
				}
				else if (index - -2 <= pageSize - 1 && index >= 1 && pageSize > 5) {
				    pageList += '<span>...</span>';
				}
					
				if (index != pageSize && index < pageSize - 2 && pageSize != 4) {
				    pageList += `<li class='li_${pageSize}'>${pageSize}</li>`;
				}		
				
				$('.low>ul').html(pageList)
				
				$(`.li_${index}`).addClass('action')
				
				console.log(ftypeid);
				let xhr_2 = new XMLHttpRequest()
				xhr_2.open('GET',`/v2/f/title_type?ftypeid=${ftypeid}&page=${parseInt(index)}`) 
				xhr_2.onload = function(){
					let data = JSON.parse(xhr_2.responseText)
					console.log(data);
					$('#sever>.center>.middle_card>ul').empty().append(
						data.map( f => {
							const { fpic, fname, fprop, fdate } = f
							return `
							<li>
								<a href="#"><img src=${fpic}></a>
								<div class="text_top">
									<h4>${fname}</h4>
									<span>${fprop}</span>
									<div>早餐</div>
								</div>
								<hr>
								<div class="date">
									<span>${fdate.slice(0,10)}</span>
									<div>
										<img src="img/spirit/look.png">89
										<img src="img/spirit/like.png">40
									</div>
								</div>
							</li>`
						})
					)
				}
				xhr_2.send()
			})
		}
	</script>
</body>
</html>